[dev-v5][DataGrid] Add pinned (sticky/frozen) column support#4671
Merged
[dev-v5][DataGrid] Add pinned (sticky/frozen) column support#4671
Conversation
Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/5cdc49d8-9764-4339-b8fa-6f9a9454f9e3 Co-authored-by: vnbaaij <[email protected]>
Copilot created this pull request from a session on behalf of
vnbaaij
April 2, 2026 20:36
View session
Collaborator
|
@copilot remove the obj\Debug folder and files from the src/Core.Scripts/ path. These are build artifacts and should not be included in the repo |
Contributor
Author
Done in e1acae8. Removed |
Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/6c2b8e3b-c3f9-4e43-9827-7c473b6dbc66 Co-authored-by: vnbaaij <[email protected]>
Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/1f05176a-ffeb-47aa-bf4a-df652edb999a Co-authored-by: vnbaaij <[email protected]>
Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/1f05176a-ffeb-47aa-bf4a-df652edb999a Co-authored-by: vnbaaij <[email protected]>
Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/1f05176a-ffeb-47aa-bf4a-df652edb999a Co-authored-by: vnbaaij <[email protected]>
Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/9c39db2d-7d9a-4278-bb79-73e76214f305 Co-authored-by: vnbaaij <[email protected]>
Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/9c39db2d-7d9a-4278-bb79-73e76214f305 Co-authored-by: vnbaaij <[email protected]>
Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/9c39db2d-7d9a-4278-bb79-73e76214f305 Co-authored-by: vnbaaij <[email protected]>
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 98.9%
|
vnbaaij
changed the title
Contributor
There was a problem hiding this comment.
Pull request overview
Adds pinned (sticky/frozen) column support to FluentDataGrid, enabling columns to remain visible while horizontally scrolling, with accompanying validation, styling, JS offset updates, docs, and tests.
Changes:
- Introduces
DataGridColumnPin+ a newPinparameter on columns, with grid-side validation and computed sticky offsets. - Updates rendering/CSS/JS to apply
position: stickyand keep left/right offsets correct during resizing. - Adds demo documentation/examples and expands test coverage/snapshots for pinned columns and updated header z-index behavior.
Reviewed changes
Copilot reviewed 32 out of 32 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_SingleStickySelect_Rendering.verified.razor.html | Updates snapshot output (removes inline header z-index styling). |
| tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_SingleSelect_Rendering.verified.razor.html | Updates snapshot output (removes inline header z-index styling). |
| tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_MultiSelect_Rendering.verified.razor.html | Updates snapshot output (removes inline header z-index styling). |
| tests/Core/Components/DataGrid/SelectColumnTests.SelectColumnTests_MultiSelect_Customized_Rendering.verified.razor.html | Updates snapshot output (removes inline header z-index styling). |
| tests/Core/Components/DataGrid/SelectColumnTests.FluentDataGrid_ColumSelect_SingleStickySelect_Rendering.verified.razor.html | Updates snapshot output (removes inline header z-index styling). |
| tests/Core/Components/DataGrid/SelectColumnTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html | Updates snapshot output (removes inline header z-index styling). |
| tests/Core/Components/DataGrid/SelectColumnTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html | Updates snapshot output (removes inline header z-index styling). |
| tests/Core/Components/DataGrid/SelectColumnTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html | Updates snapshot output (removes inline header z-index styling). |
| tests/Core/Components/DataGrid/HierarchicalSelectColumnTests.HierarchicalSelectColumnTests_Rendering.verified.razor.html | Updates snapshot output (removes inline header z-index styling). |
| tests/Core/Components/DataGrid/FluentDataGridTests.razor | Adds assertions ensuring header z-index moved from th to the button/menu layer. |
| tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_StripedRows.verified.razor.html | Updates snapshot output (removes inline header z-index styling). |
| tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_StickyHeader.verified.razor.html | Updates snapshot output (removes inline header z-index styling). |
| tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_IsFixed.verified.razor.html | Updates snapshot output (removes inline header z-index styling). |
| tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_HeaderCellAsButtonWithMenu.verified.razor.html | Updates snapshot output (adds z-index layering on button/menu). |
| tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_Default.verified.razor.html | Updates snapshot output (removes inline header z-index styling). |
| tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnSortUISettings.verified.razor.html | Updates snapshot output (removes inline header z-index styling). |
| tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnResizeUISettings.verified.razor.html | Updates snapshot output (removes inline header z-index styling). |
| tests/Core/Components/DataGrid/FluentDataGridTests.FluentDataGrid_ColumnOptionsUISettings.verified.razor.html | Updates snapshot output (removes inline header z-index styling). |
| tests/Core/Components/DataGrid/FluentDataGridPinnedColumnTests.razor | Adds new unit/snapshot tests for pinned columns, offsets, and validation rules. |
| tests/Core/Components/DataGrid/FluentDataGridPinnedColumnTests.FluentDataGrid_PinnedColumn_Snapshot.verified.razor.html | Adds snapshot for pinned column rendering (classes + sticky offsets). |
| tests/Core/Components/DataGrid/FluentDataGridCellTests.FluentDataGridCell_DisableCellFocus.verified.razor.html | Updates snapshot output (removes inline header z-index styling). |
| src/Core/Enums/DataGridColumnPin.cs | Adds enum defining None/Left/Right pin states. |
| src/Core/Components/DataGrid/FluentDataGridCell.razor.cs | Applies pinned classes + sticky positioning/offset styles for pinned columns; adjusts min-width behavior and z-index usage. |
| src/Core/Components/DataGrid/FluentDataGrid.razor.ts | Adds pinned offset recalculation and improves min-width handling during resize; introduces UpdatePinnedColumnOffsets. |
| src/Core/Components/DataGrid/FluentDataGrid.razor.css | Adds pinned column styling (backgrounds, separators, stacking rules) and introduces --fluent-data-grid-pinned-background. |
| src/Core/Components/DataGrid/FluentDataGrid.razor.cs | Validates pinned configuration and computes initial pin offsets from explicit pixel widths. |
| src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs | Adds Pin parameter and internal computed PinOffsetPx for sticky offsets. |
| src/Core/Components/DataGrid/Columns/ColumnBase.razor | Adjusts header menu/button layering to use explicit z-index style on interactive elements. |
| src/Core.Scripts/.gitignore | Adds obj/ ignore for Core.Scripts. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Pages/DataGridPinnedColumnsPage.md | Adds new documentation page for pinned columns. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/FluentDataGrid.md | Links the new pinned columns doc page and minor formatting tweaks. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Examples/DataGridPinnedColumns.razor | Adds a demo example showcasing pinned columns. |
Comments suppressed due to low confidence (2)
src/Core/Components/DataGrid/FluentDataGrid.razor.ts:476
- Pinned offsets are kept in sync during drag resize, but ResizeColumnDiscrete (keyboard/menu resize) doesn’t call UpdatePinnedColumnOffsets. Resizing a pinned (or adjacent) column via this path can leave pinned columns misaligned until a full re-init. Consider calling UpdatePinnedColumnOffsets after applying the new size / gridTemplateColumns here too.
if (column.header === headerBeingResized) {
const width = headerBeingResized!.offsetWidth + change;
//const width = headerBeingResized!.getBoundingClientRect().width + change;
if (change < 0) {
column.size = Math.max(getMinWidthPx(column.header), width) + 'px';
}
else {
column.size = width + 'px';
}
column.header.style.width = column.size;
}
if (isGrid) {
// for grid we need to recalculate all columns that are minmax
if (column.size.startsWith('minmax')) {
column.size = column.header.offsetWidth + 'px';
}
columns.push(column.size);
}
});
if (isGrid) {
gridElement.style.gridTemplateColumns = columns.join(' ');
}
}
src/Core/Components/DataGrid/FluentDataGrid.razor.ts:508
- ResizeColumnExact updates column widths but doesn’t call UpdatePinnedColumnOffsets, so pinned columns may keep stale left/right offsets after an exact resize. Consider invoking UpdatePinnedColumnOffsets before dispatching
closecolumnresize(and after updating gridTemplateColumns in Grid mode).
grids.find(grid => grid.id === gridElement.id)!.columns.forEach((column: any) => {
if (column.header === headerBeingResized) {
column.size = Math.max(getMinWidthPx(column.header), width) + 'px';
column.header.style.width = column.size;
}
if (isGrid) {
// for grid we need to recalculate all columns that are minmax
if (column.size.startsWith('minmax')) {
column.size = column.header.offsetWidth + 'px';
}
columns.push(column.size);
}
});
if (isGrid) {
gridElement.style.gridTemplateColumns = columns.join(' ');
}
gridElement.dispatchEvent(new CustomEvent('closecolumnresize', { bubbles: true }));
gridElement.focus();
}
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
...mo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Pages/DataGridPinnedColumnsPage.md
Show resolved
Hide resolved
dvoituron
requested changes
Apr 4, 2026
…ve tracked generated props file (#4673) * feat: rename DataGridColumnPin Left/Right to Start/End and PinOffsetPx to PinOffset (string) with logical CSS properties Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/705a5b7c-1768-42a0-ba5f-faa99daf78d4 Co-authored-by: vnbaaij <[email protected]> * chore: remove accidentally committed build artifact and add obj/ to .gitignore Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/705a5b7c-1768-42a0-ba5f-faa99daf78d4 Co-authored-by: vnbaaij <[email protected]> * chore: plan wording updates for start/end docs and comments Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/e324508b-d7f0-40e2-bfec-a2707d42806c Co-authored-by: vnbaaij <[email protected]> * docs: simplify DataGrid start/end wording Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/e324508b-d7f0-40e2-bfec-a2707d42806c Co-authored-by: vnbaaij <[email protected]> * chore: remove tracked generated props file Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/9d4563a7-5f41-4b62-ab85-0d78d50060b1 Co-authored-by: vnbaaij <[email protected]> * docs: restore pinned columns page metadata Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/bbc46172-3499-4123-a119-cc10c435de7f Co-authored-by: vnbaaij <[email protected]> * chore: remove regenerated props file Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/bbc46172-3499-4123-a119-cc10c435de7f Co-authored-by: vnbaaij <[email protected]> * Fix formatting in DataGridPinnedColumnsPage.md * fix: allow non-pixel pinned column widths Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/4c32bc45-2c71-462f-8fad-b3b8abd4a55a Co-authored-by: vnbaaij <[email protected]> * docs: clarify pinned offset recomputation comments Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/4c32bc45-2c71-462f-8fad-b3b8abd4a55a Co-authored-by: vnbaaij <[email protected]> --------- Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: vnbaaij <[email protected]> Co-authored-by: Vincent Baaij <[email protected]>
dvoituron
approved these changes
Apr 7, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request adds support for pinned (frozen) columns to the
FluentDataGridcomponent, allowing columns to remain visible while horizontally scrolling. It introduces a newPinparameter for columns, enforces validation and layout rules, updates the CSS for proper appearance, and enhances the JavaScript to keep sticky offsets in sync during resizing. Documentation and demo examples are also provided.Pinned Columns Feature:
Pinparameter toColumnBase<TGridItem>(and UI/JS support) to allow columns to be pinned to the left or right edge of the grid, with validation for explicit pixel widths and contiguous placement. Throws descriptive exceptions for invalid configurations. (src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs,src/Core/Components/DataGrid/FluentDataGrid.razor.cs, [1] [2] [3]--fluent-data-grid-pinned-background. Ensures pinned headers stack above data cells and handles sticky header row correctly. (src/Core/Components/DataGrid/FluentDataGrid.razor.css, [1] [2]JavaScript Integration:
src/Core/Components/DataGrid/FluentDataGrid.razor.ts, [1] [2] [3] [4] [5] [6]Documentation and Examples:
examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Pages/DataGridPinnedColumnsPage.md, examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Pages/DataGridPinnedColumnsPage.mdR1-R74)Pinparameter and recommended grid/container styling. (examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Examples/DataGridPinnedColumns.razor, examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Examples/DataGridPinnedColumns.razorR1-R54)Other improvements:
src/Core/Components/DataGrid/Columns/ColumnBase.razor, [1] [2]